<template>
  <div class="hello">
	  <div class="block">
			<span class="demonstration">默认</span>
			<el-date-picker
				v-model="value1"
				type="daterange"
				:picker-options="pickerOptions"
				range-separator="至"
				start-placeholder="开始日期"
				end-placeholder="结束日期">
			</el-date-picker>
		</div>
    <h1>{{ msg }}</h1>
     <input type="text" v-model="firstname">+
     <input type="text" v-model="lasttname">=
     <input type="text" v-model="fullname">
		 <p @click="toVuePage">跳转到vue面试题</p>

  </div>
</template>
<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
			value1: '',
			startTime:'2019-11-01',
			endTime:'2019-11-20',
			pickerOptions:{
          disabledDate: (date) => {
						const time=date.getTime();
						console.log(time);
						let curentDate=new Date().getTime();//现在的时间戳					
let  endTime= this.endTime.replace(/-/g,'/'); // 将-替换成/，因为下面这个构造函数只支持/分隔的日期字符串
let endTimeStamp = new Date(endTime).getTime();//结束的时间戳
						return time< curentDate||time>endTimeStamp;//true是禁止点击
					}
        },
				firstname:1,
        lasttname:2,
    }
  },
	created(){
		this.createFn();
	},
	mounted(){
		this.mountFn();
	},
	
	methods:{
	  createFn(){
			console.log('我是createFn');
		},
		mountFn(){
			console.log('我是mountFn');
		},
		toVuePage(){
		 alert(1);
			this.$router.push({path:'/toVuePage'});
		}
	},
	watch:{
	  fullname(val,val1){//新增和旧值
		  console.log(val,val1);
			if(this.fullname>60){
				console.log("大于60是及格");
			}else{
				console.log("小于60是不及格");
			}
		}
	},
	computed: {
			fullname: function () {
				console.log('我是computed里的fullname');
				return parseInt(this.firstname) +  parseInt(this.lasttname)
			}
	},
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
